<template>
  <div id="rankingList">
    <c-title text="排行榜"></c-title>
    <div class="rankingList-list">
      <div class="order-item" v-for="(item, index) in rankingList" :key="index" @click="rankingNavTo(item.id)">
        <div class="card-wrap flex">
          <div class="img">
            <img :src="item.thumb" />
            <div class="number">TOP{{ index + 1 }}</div>
          </div>
          <div class="card-main flex">
            <div class="flex-j-sb ">
              <div class="name ell">{{ item.title }}</div>
            </div>
            <div class="flex-j-sb">
              <div class="price-left">
                <span class="market-price"
                  >￥<span class="num">{{ item.market_price }}</span></span
                >
                <span class="cost-price">¥{{ item.price }}</span>
              </div>
              <div class="price-right">
                <span>已售 {{ item.show_sales }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rankingList_controller from "./rankingList_controller";
export default rankingList_controller;
</script>
<style scoped>
#rankingList ::v-deep .van-nav-bar {
  background-color: var(--themeBgColor);
  border: none;
}

#rankingList ::v-deep .van-nav-bar__left .van-button {
  background-color: var(--themeBgColor);
}

#rankingList ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

#rankingList ::v-deep .van-nav-bar__title {
  color: #fff;
}
</style>
<style lang="scss" scoped>
body {
  background-color: #f7f8fb;
}

#rankingList {
  /* background-color: #fff; */
  background-image: linear-gradient(#ffc11e, #f7f8fb);
  background-image: var(--themeBgColor);
  background-size: 100% 14.1875rem;
  background-repeat: no-repeat;

  .rankingList-list {
    margin: 0.625rem;

    .order-item {
      background-color: #fff;
      border-radius: 0.3125rem;
      padding: 0.8125rem;
      margin-bottom: 0.625rem;
    }

    .card-wrap .img {
      width: 4.375rem;
      height: 4.375rem;
      width: 4.375rem;
      height: 4.375rem;
      margin: 0 0.6875rem 0 0;
      position: relative;

      .number {
        padding: 0.125rem 0.5rem;
        border-radius: 0.1875rem 0 0.1875rem 0;
        background: #ea1d1d;
        font-size: 0.625rem;
        font-weight: 400;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
      }

      img {
        width: 3.9375rem;
        height: 3.9375rem;
        border-radius: 0.3125rem;
      }
    }

    .card-main {
      width: 100%;
      flex-direction: column;
      justify-content: space-between;

      .name {
        font-size: 0.875rem;
        color: #222;
        text-align: left;
      }

      .attribute {
        margin: 0.5rem 0 0 0;
        font-size: 12px;
        color: #979797;
      }

      .price-left {
        .market-price {
          color: #ff3a00;
          font-size: 0.6875rem;

          .num {
            font-size: 1rem;
          }
        }

        .cost-price {
          font-weight: 400;
          color: #b5b5b5;
          font-size: 0.625rem;
          margin-left: 0.4375rem;
        }
      }

      .price-right {
        span {
          font-weight: 400;
          font-size: 0.625rem;
          color: #b5b5b5;
        }
      }
    }

    .attribute .num {
      margin: 0 1.9375rem 0 0;
    }
  }
}
</style>
